import React, { ReactElement, useMemo, useState } from 'react';
import { Image } from 'react-native';

import styles from './style';
import Button from '../../../../../../components/Button';
import { pausePPT, playPPT } from '../../../../actions';
import {
  classRoomPlay,
  classRoomStop
} from '../../../../../../constant/resource';

export default (): ReactElement => {
  const [pause, setPause] = useState(false);
  return useMemo(
    (): ReactElement => (
      <Button
        hitSlop={{ left: 20, top: 20, right: 20, bottom: 20 }}
        style={styles.status}
        onPress={(): void => {
          setPause(!pause);
          if (pause) {
            playPPT();
          } else {
            pausePPT();
          }
        }}
      >
        <Image
          source={pause ? classRoomPlay : classRoomStop}
          style={styles.icon}
          resizeMode="center"
        />
      </Button>
    ),
    [pause]
  );
};
